<template>
	<view class="container">
		<scroll-view scroll-y class="content">
			
				<view v-for="(image, index) in images" :key="index" class="image-item">
					<image :src="image" mode="aspectFit" class="full-screen-image"></image>
				</view>
			<view v-if="isMp4">
				<view>
					<video id="myVideo" class="video-player" :src="videoUrl" controls show-center-play-btn
						enable-play-gesture show-progress title="视频播放" :poster="videoPoster"
						@error="videoErrorCallback"></video>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	const images = ref([]);
	const videoUrl = ref("");
	const isMp4 = ref(false) ;
	// const etx = ref('') ;

	// 获取 URL 中的查询参数
	const getQueryParams = () => {
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		return currentPage.options;
	};

	const fetchImages = async (id) => {
		try {
			const res = await uni.request({
				url: 'http://192.168.100.132:8080/file/preview',
				method: 'GET',
				data: {
					id
				}
			});

			if (res.data.code === 200) {
				images.value = res.data.t;
				console.log('Images fetched:', images.value);
			} else {
				uni.showToast({
					title: '获取图片失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('获取图片失败:', error);
			uni.showToast({
				title: '获取图片失败',
				icon: 'none'
			});
		}
	};

	const fetchVideo = async (id) => {
		try {
			const res = await uni.request({
				url: 'http://localhost:8080/catalog/showVideo',
				method: 'GET',
				data: {
					id
				}
			});

			if (res.data.code === 200) {
				videoUrl.value = res.data.t;
				console.log('video url:', videoUrl.value);
			} else {
				uni.showToast({
					title: '获取视频失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('获取图片失败:', error);
			uni.showToast({
				title: '获取图片失败',
				icon: 'none'
			});
		}
	};

	onMounted(() => {
		const params = getQueryParams();
		const id = params.id;
		const resourceName = params.resourceName;
		//切割出后缀，不带.的
		const etx = resourceName.split('.')[1];
		console.log("etx    " + etx);

		console.log('ID:', id);
		console.log('resourceName:', resourceName);
		if (etx != "mp4" && id) {
			fetchImages(id);
		} else if (etx == "mp4" && id) {
			fetchVideo(id);
			isMp4.value = true;
		} else {
			uni.showToast({
				title: '未获取到资源 ID',
				icon: 'none'
			});
		}
	});
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	.content {
		width: 100%;
		height: 100%;
		overflow: auto;
		/* 确保滚动视图可以滚动 */
	}

	.image-item {
		width: 100%;
		text-align: center;
	}

	.full-screen-image {
		width: 100%;
		height: 100vh;
		/* 设置为全屏高度 */
		object-fit: cover;
		/* 保持宽高比并铺满容器 */
	}

	/* 微信小程序环境下的视频样式 */
	.video-player {
		width: 100%;
		height: 500px;
	}
</style>